<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插入标记(2)</title>
</head>
<body>
</body>
<script>
/** 6.内存与性能问题:
 *    a.使用本节介绍的方法替换子节点可能在浏览器（特别是 IE）中导致内存问题。比如，如果被移除的子树元素中之前有关联的事件处理
 *      程序或其他 JavaScript 对象（作为元素的属性），那它们之间的绑定关系会滞留在内存中。如果这种替换操作频繁发生，页面的
 *      内存占用就会持续攀升。在使用 innerHTML、outerHTML 和 insertAdjacentHTML() 之前，最好手动删除要被替换的元素上
 *      关联的事件处理程序和 JavaScript 对象。
 *    b.使用这些属性当然有其方便之处，特别是 innerHTML 。一般来讲，插入大量的新 HTML 使用 innerHTML 比使用多次 DOM 操作
 *      创建节点再插入来得更便捷。这是因为 HTML 解析器会解析设置给innerHTML（或 outerHTML）的值。解析器在浏览器中是底层
 *      代码（通常是 C++代码），比 JavaScript 快得多。不过，HTML 解析器的构建与解构也不是没有代价，因此最好限制使用
 *      innerHTML 和outerHTML 的次数。
 *    c. innerHTML 优化：拼接一个独立的字符串，最后再一次性把生成的字符串赋值给 innerHTML 。
 * **/

//优化 innerHTML 字符串拼接
    let values = ['1','2','3','4']
    let itemsHtml = "";
    for (let value of values){
        itemsHtml += '<li>${value}</li>';
    }
    document.body.innerHTML = itemsHtml;

/** 7.跨站点脚本
 *    a.尽管 innerHTML 不会执行自己创建的<script>标签，但仍然向恶意用户暴露了很大的攻击面，因为通过它可以毫不费力地创建元素并执行 onclick
 *      之类的属性。
 *    b.如果页面中要使用用户提供的信息，则不建议使用 innerHTML。与使用 innerHTML 获得的方便相比，防止 XSS 攻击更让人头疼。此时一定要隔离要
 *      插入的数据，在插入页面前必须毫不犹豫地使用相关的库对它们进行转义。
 * **/
</script>
</html>